<template>
  <a-form-model-item :label="label" :prop="prop" :rules="rules" :labelCol="labelCol" :wrapperCol="wrapperCol">
    <a-input
      v-if="readonly"
      class="readonly"
      v-model="value"
      :placeholder="placeholder"
      disabled
      style="background-color:#fff;color: rgba(0, 0, 0, 0.65);cursor: auto;"
      :prefix="prefix"
      :suffix="suffix"
    >
    </a-input>
    <a-input
      v-else
      v-model="value"
      :placeholder="placeholder"
      :disabled="disabled"
      :prefix="prefix"
      :suffix="suffix"
      @input="handleChange"
    >
    </a-input>
  </a-form-model-item>
</template>

<script>
export default {
  name: 'ResealInput',
  props: {
    // 绑定的对象
    form: {
      type: Object,
      default: () => {
        return {};
      }
    },
    // label格数
    labelCol: {
      type: Object,
      default: () => {
        return null;
      }
    },
    // input格数
    wrapperCol: {
      type: Object,
      default: () => {
        return null;
      }
    },
    // 绑定对象的属性
    prop: {
      type: String,
      default: 'attribute'
    },
    // 循环中使用的检验规则
    rules: {
      type: Object,
      default: () => {
        return null;
      }
    },
    // 文字
    label: {
      type: String,
      default: ''
    },
    placeholder: {
      type: String,
      default: '请输入'
    },
    // 禁止操作
    disabled: {
      type: Boolean,
      default: false
    },
    // 只读
    readonly: {
      type: Boolean,
      default: false
    },
    // 输入框前部内容
    prefix: {
      type: String,
      default: ''
    },
    // 输入框后部内容
    suffix: {
      type: String,
      default: ''
    },
    // 小数点后位数
    precision: {
      type: Number,
      default: null
    }
  },
  computed: {
    parentData: function() {
      const arr = this.prop.split('.');
      const key = arr[arr.length - 1];
      return this.analysisAttribute(this.form)[key];
    }
  },
  watch: {
    parentData: {
      handler: function(n) {
        // 20220209z 更新支持小数位数限制
        this.value = this.conditionalDigit(n);
      },
      immediate: true
    }
  },
  data() {
    return {
      value: undefined
    };
  },
  methods: {
    handleChange(e) {
      const value = this.setNewVal(e.target.value);
      this.value = value;
      // this.$emit('change', e.target.value);
      // this.analysisAttribute(this.form, e.target.value);
      this.$emit('change', value);
      this.analysisAttribute(this.form, value);
    },
    /**
     * [analysisAttribute 根据字符串获取末级对象]
     * @param  {[type]} object [读取的对象]
     * @param  {[type]} val    [末级对象的具体属性赋值val（空值输出末级对象）]
     * @return {[type]}        [description]
     */
    analysisAttribute(object, val) {
      var arr = this.prop.split('.');
      let index = 0;
      const length = arr.length;
      while (object != null && index < length - 1) {
        object = object[arr[index]];
        index++;
      }
      if (val || val === 0 || val === '') {
        object[arr[index]] = val;
      } else {
        return object;
      }
    },
    /**
     * [setNewVal 替换字符串中的所有特殊字符（包含空格）]
     * @param {[type]} e [description]
     */
    setNewVal(e) {
      // if (e) {
        // const pattern = /[`~!@#$^&*()=|{}':;',\\[\].<>/?~！@#￥……&*（）——|{}【】'；：""'。，、？\s]/g;
        // const space = /[ ]/g;
        // // const enter = /[\r\n]/g;
        // e = e.replace(space, '');
      // }
      return e;
    },
    /**
     * [conditionalDigit 小数位数限制]
     * @param  {[type]} val [原数据]
     * @return {[type]}     [description]
     */
    conditionalDigit(val) {
      if (this.precision !== null) {
        const k = Math.pow(10, this.precision);
        return parseInt(Number(val) * k) / k;
      } else {
        return val;
      }
    }
  }
};
</script>
<style scoped>
  .readonly input {
    background-color:#fff;
    color: rgba(0, 0, 0, 0.65);
    cursor: auto;
  }
</style>
